<template>
  <div class="view-dialog">
    <!-- 试题预览 -->
    <el-row>
      <el-col :span="6">
        【题型】：
        {{ isQuestionType(question.questionType) }}
      </el-col>
      <el-col :span="6">【编号】：{{ question.id }}</el-col>
      <el-col :span="6">
        【难度】：
        {{ isDifficulty(question.difficulty) }}
      </el-col>
      <el-col :span="6">【标签】：{{ question.tags }}</el-col>
      <el-col :span="6">【学科】：{{ question.subjectName }}</el-col>
      <el-col :span="6">【目录】：{{ question.directoryName }}</el-col>
      <el-col :span="6">【方向】：{{ question.direction }}</el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>【题干】：</el-col>
      <el-col>
        <span v-html="question.question" style="color:#00f"> </span>
      </el-col>
      <el-col v-if="question.questionType !== '3'">
        <div style="margin-bottom:10px">
          <span> {{ isQuestionType(question.questionType) }}</span
          >题 选项：（以下选中的选项为正确答案）
        </div>
        <!-- <div
          class="el-radio-box"
          v-for="item in questionOptions"
          :key="item.id"
        >
          <label class="el-radio" for="ti">
            <span>
              <input
                :type="item.questionType === '1' ? 'radio' : 'checkbox'"
                id="ti"
                :checked="item.isRight === 1"
                :disabled="item.isRight === 0"
              />
            </span>
            <span v-html="item.title"></span>
          </label>
        </div> -->
        <div v-if="question.questionType === '1'">
          <el-radio-group v-model="isRight">
            <div
              v-for="item in questionOptions"
              :key="item.id"
              class="question-options"
            >
              <label for="ti" class="question-option">
                <el-radio id="ti" :label="item.code" @click.native.prevent>
                  {{ item.title }}
                </el-radio>
              </label>
            </div>
          </el-radio-group>
        </div>
        <div v-else-if="question.questionType === '2'">
          <el-checkbox-group v-model="isRight">
            <div
              v-for="item in questionOptions"
              :key="item.id"
              class="question-options"
            >
              <label for="ti">
                <el-checkbox id="ti" :label="item.code" @click.native.prevent>
                  {{ item.title }}
                </el-checkbox>
              </label>
            </div>
          </el-checkbox-group>
        </div>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        【参考答案】：
        <el-button type="danger" @click="videoShow = !videoShow">
          视频答案预览
        </el-button>
        <div class="video" v-if="videoShow">
          <video :src="question.videoURL" controls></video>
        </div>
      </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col> 【答案解析】：<span v-html="question.answer"></span> </el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        【题目备注】：<span>{{ question.remarks }} </span>
      </el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <div>
        <el-button
          type="primary"
          @click="$emit('close')"
          class="view-close-btn"
        >
          关闭
        </el-button>
      </div>
    </span>
  </div>
</template>

<script>
import { detail } from '../../api/hmmm/questions'

export default {
  name: 'QuestionsView',
  props: {
    questionID: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      question: {}, // 基础试题详情
      videoShow: false, // 控制视频预览
      questionOptions: [], // 答案选项
      isRight: '' // 正确答案
    }
  },
  created() {
    this.getQuestion()
  },
  methods: {
    async getQuestion() {
      try {
        const { data: res } = await detail({
          id: this.questionID
        })
        console.log(res)
        this.question = res
        this.questionOptions = res.options

        const isRightItem = this.questionOptions.filter(item => {
          return item.isRight === 1
        })

        console.log(isRightItem)
        switch (this.question.questionType) {
          case '1':
            this.isRight = isRightItem[0].code
            break
          case '2':
            this.isRight = isRightItem.map(item => {
              return item.code
            })
            break
        }

        console.log(this.isRight)
      } catch (error) {
        this.$message('数据获取失败')
      }
    }
  },
  computed: {
    isQuestionType() {
      return function(val) {
        if (val === '1') {
          return '单选'
        } else if (val === '2') {
          return '多选'
        } else {
          return '简答'
        }
      }
    },
    isDifficulty() {
      return function(val) {
        if (val === '1') {
          return '简单'
        } else if (val === '2') {
          return '一般'
        } else {
          return '困难'
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.dialog-footer {
  text-align: right;
}

.view-dialog {
  .el-col {
    padding: 10px 0;
  }

  .question-options {
    margin: 10px 0;
  }

  .video {
    width: 400px;
    height: 280px;

    video {
      width: 100%;
      margin: 30px auto;
      // height: 100%;
    }
  }
}
</style>
